<template>
  <!-- 容器：wh -->
  <div class="progress" ref="progress"></div>
</template>

<script>
//第一步:引入echarts
import * as echarts from "echarts";
export default {
  name: "",
  mounted() {
    //第一步：
    let mycharts = echarts.init(this.$refs.progress);
    //第二步：
    let option = {
      xAxis: {
        show: false,
        min: 0, //最小数值0
        max: 100, //最大数值100
      },
      yAxis: {
        show: false,
        //y轴均匀分布
        type: "category",
      },
      //布局
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      series: {
        type: "bar",
        data: [70],
        //柱条的宽度
        barWidth: 10,
        //柱状图的文本
        label: {
          show: true,
          //文本位置
          position: "right",
          //自定义文本内容
          formatter: "|",
        },
        //柱条的颜色
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "yellow", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "cyan", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //显示背景颜色
        showBackground: true,
        backgroundStyle: {
          color: "#eee",
        },
      },
    };
    //第三步
    mycharts.setOption(option);
    //当浏览器的窗口发生变化的时候监听事件---DOM2级事件
    window.addEventListener("resize", () => {
      //图表自适应
      mycharts.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.progress {
  width: 100%;
  height: 100%;
}
</style>
